<template>
  <div class="container">
    <div class="captioncon betweenbox">
      <div class="centerbox">
        <span class="iconfont iconbaogao cpationicon"></span>
        <span>设备总数</span>
      </div>
      <div class="return" @click="goBack"></div>
    </div>
    <div class="formcon">
      <myform ref="myform" @formSearch="formSearch" />
    </div>
    <div class="tablecon">
      <mytable :isShowLoading='isShowLoading' :tableData='tableData'/>
    </div>
    <div class="pagcon">
      <mypagination  :totalSize='totalSize' ref="mypagination" @paginSearch="paginSearch"/>
    </div>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import mytable from "./Table.vue";
import mypagination from "./Pagination.vue";
import myform from "./Form.vue";

@Component({ components: { mytable, mypagination, myform } })
export default class extends Vue {
  $refs!: {
    myform: myform;
    mypagination: mypagination;
  };
  //表格加载状态
  isShowLoading=true
  formSearch() {
    let page = this.getPagination();
    page.page = 1;
    this.setPagination(page);
    this.search();
  }
  paginSearch() {
    this.search();
  }
  search() {
    let params = Object.assign({}, this.getForm(), this.getPagination());
    params.czkssj=  this.$refs.myform.Time[0]||''
    params.czjssj=  this.$refs.myform.Time[1]||''
     Vue.delete(params,'totalSize')
    this.fetch(params);
  }
  getForm() {
    let myform = this.$refs.myform;
    if (myform) {
      return myform.formData || {};
    } else {
      return {};
    }
  }
  getPagination() {
    let mypagination = this.$refs.mypagination;
    return mypagination.pages;
  }
  setPagination(pages) {
    let mypagination = this.$refs.mypagination;
    if (mypagination) {
      mypagination.pages = pages || {};
    }
  }
  tableData=[]
  totalSize=''
  fetch(from) {
    this.isShowLoading=true;
      (this as any).$services
      .queryKzBwList({ data: from, method: "get" })
      .then((result: any) => {
        console.log(result);
        if (result) {
          let page=from.page
        let size=from.size
        this.tableData=result.data.records.map((v,i)=>{
          v.myIndex=(page-1)*size+i+1
          return v
          
        })
        this.totalSize=result.data.total
         this.isShowLoading=false;
        }
      })
      .catch((err: object) => {
        console.log(err);
         this.isShowLoading=false;
      });
  }

  //返回按钮
  goBack() {
    this.$router.go(-1);
  }

}
</script>

<style lang="scss" scoped>
.container {
  width: 100%;
  height: 100%;
  padding: 0 0.2rem 0.2rem;
  .captioncon {
    width: 100%;
    height: 0.5rem;
    align-items: center;
    align-content: center;
    font-size: 0.2rem;
    .cpationicon {
      font-size: 0.2rem;
      margin-right: 0.04rem;
    }
    .return {
      width: 0.9rem;
      height: 0.3rem;
      background: url(../../../assets/img/return.png) no-repeat;
      background-size: 100% 100%;
      cursor: pointer;
    }
  }
  .formcon {
    width: 100%;
    height: 1.2rem;
  }
  .tablecon {
    width: 100%;
    height: calc(100% - 0.5rem - 1.2rem - 0.4rem);
  }
  .pagcon {
    width: 100%;
    height: 0.4rem;
  }
}
</style>

